import React from 'react'

/**
 * 非受控组件使用的步骤
 * 
 * 非受控组件在开发中一般不使用，
 * 为什么不使用呢？
 * 因为操作复杂，不好控制
 * 
 * 1. 调用 React.createRef() -- 创建 ref 对象
 * 2. 将创建好的 ref 和 表单元素进行绑定 -- 获取表单元素
 * 3. 绑定好之后，就可以在表单元素状态或值发生改变的时候，通过 ref 获取值即可
 */

export default class App extends React.Component {
  constructor () {
    super ()

    this.state = {
      val: ''
    }

    // 1. 调用 React.createRef()
    this.textRef = React.createRef()
  }

  change = (e) => {
    // 通过绑定的 ref 获取到最新输入的表单元素的值
    // console.log(this.textRef.current.value)
    this.setState({
      val: this.textRef.current.value
    })
  }

  render() {
    return (
      <div>
        {/* 3. 将创建好的 ref 和 表单元素进行绑定 */}
        <input ref={ this.textRef } type="text" value="122" onChange={ this.change } />
      </div>
    )
  }
}
